<template>
  <view class="tabbarBox">
    <fui-grid :square="false" :columns="tabbarList.length" :showBorder="false">
      <fui-grid-item v-for="(item, index) in tabbarList" :key="index">
        <view :class="['tabbarItem', getTab(item.tabbarIndex) ? 'active' : '']" @click="changeTab(item.tabbarIndex)">
          <image style="width: 60rpx; height: 60rpx" :src="getTab(item.tabbarIndex) ? item.iconSelect : item.icon"></image>
          <text>{{ item.text }}</text>
        </view>
      </fui-grid-item>
    </fui-grid>
  </view>
</template>

<script setup lang="ts">
import fuiGrid from "@/components/firstui/fui-grid/fui-grid.vue";
import fuiGridItem from "@/components/firstui/fui-grid-item/fui-grid-item.vue";
import Store from "@/store";
import Nav from "@/router";
const tabbarList = [
  {
    text: "首页",
    icon: "/src/static/logo.png",
    iconSelect: "/src/static/logo.png",
    tabbarIndex: 1,
  },
  {
    text: "首页",
    icon: "/src/static/logo.png",
    iconSelect: "/src/static/logo.png",
    tabbarIndex: 2,
  },
  {
    text: "首页",
    icon: "/src/static/logo.png",
    iconSelect: "/src/static/logo.png",
    tabbarIndex: 3,
  },
  {
    text: "首页",
    icon: "/src/static/logo.png",
    iconSelect: "/src/static/logo.png",
    tabbarIndex: 4,
  },
];
const changeTab = (index: number) => {
  Nav.NavSwitchTab(index);
};
const getTab = (index: number) => Store.Common.getTabbarIndex() === index;
</script>
<style scoped>
.tabbarBox {
  width: 750rpx;
  height: 120rpx;
  background-color: white;
}
.tabbarItem {
  width: 100%;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.active {
  color: #2b9939;
}
</style>
